<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>填报回退通知</span>
      </div>

      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="查询区间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="resList">
        <el-table-column
          prop="fillId"
          label="申报编号"
          align="center"
          width="80"
        />
        <el-table-column prop="projectCode" label="项目代码" />
        <el-table-column prop="stageName" label="开发阶段" />
        <el-table-column prop="officeName" label="事务种类" width="120" />
        <el-table-column
          label="申报日期"
          prop="workTime"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.workTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workHour" label="工时(H)" align="center" />
        <el-table-column prop="fillStateName" label="审核状态" />
        <el-table-column prop="checkBy" label="审核人" />
        <el-table-column
          label="审核时间"
          prop="checkTime"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checkTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rollback"
          label="回退原因"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['work:back:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['work:back:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 修改填报回退 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="申报编号" prop="fillId">
          <el-input v-model="form.fillId" disabled />
        </el-form-item>
        <el-form-item label="项目代码" prop="projectId">
          <el-select
            v-model="form.projectId"
            placeholder="请输入项目代码"
            clearable
            filterable
            style="width: 100%"
            @change="changeProject"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.projectId"
              :label="item.projectCode"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目开发阶段" prop="stageName">
          <el-input
            v-model="form.stageName"
            placeholder="请输入当前项目开发阶段"
            disabled
          />
        </el-form-item>
        <el-form-item label="事务类型" prop="officeId">
          <el-select
            v-model="form.officeId"
            placeholder="请输入事务类型"
            clearable
            filterable
            style="width: 100%"
            @change="changeOffice"
          >
            <el-option
              v-for="item in officeOptions"
              :key="item.officeId"
              :label="item.officeName"
              :value="item.officeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申报日期" prop="workTime">
          <el-date-picker
            v-model="form.workTime"
            type="datetime"
            style="width: 100%"
            disabled
          />
        </el-form-item>
        <el-form-item label="申报工时(H)" prop="workHour">
          <el-input-number
            v-model="form.workHour"
            controls-position="right"
            :min="0.5"
            :max="24"
            :step="0.5"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="申报内容" prop="workRemark">
          <el-input v-model="form.workRemark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBack, updateBack, delBack } from '@/api/work/back'
import { optionSelect as getOffices } from '@/api/work/office'
import { optionSelect as getProjects } from '@/api/work/project'

export default {
  name: 'Back',
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 回退列表
      resList: [],
      // 时间区间
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 日期范围
      dateRange: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 项目选项
      projectOptions: [],
      // 事务类型选项
      officeOptions: [],
      // 表单校验
      rules: {
        fillId: [
          { required: true, message: '申报回退编号不能为空', trigger: 'blur' }
        ],
        officeId: [
          { required: true, message: '事务种类不能为空', trigger: 'change' }
        ],
        workTime: [
          { required: true, message: '开发日期不能为空', trigger: 'blur' }
        ],
        workHour: [
          { required: true, message: '工时不能为空', trigger: 'blur' }
        ],
        workRemark: [
          { required: true, message: '备注不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询填报回退通知 */
    getList() {
      this.loading = true
      listBack(this.queryParams).then((response) => {
        this.resList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.dateRange.length > 0) {
        this.dateRange = this.dateRange.map((e) => this.parseTime(e))
      }
      this.addDateRange(this.queryParams, this.dateRange)
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = ''
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 初始化项目下拉 */
    getProjects() {
      getProjects().then((response) => {
        this.projectOptions = response.data
      })
    },
    /** 初始化事务种类下拉 */
    getOffices() {
      getOffices().then((response) => {
        this.officeOptions = response.data
      })
    },
    /** 选择项目，带出开发阶段 */
    changeProject(data) {
      if (data) {
        let option = this.projectOptions.find((i) => i.projectId == data)
        this.form.projectCode = option.projectCode
        this.form.stageId = option.stageId
        this.form.stageName = option.stageName
      } else {
        this.form.projectId = undefined
        this.form.projectCode = undefined
        this.form.stageId = undefined
        this.form.stageName = undefined
      }
    },
    /** 选择事务种类 */
    changeOffice(data) {
      if (data) {
        let option = this.officeOptions.find((i) => i.officeId == data)
        this.form.officeId = option.officeId
        this.form.officeName = option.officeName
      } else {
        this.form.officeId = undefined
        this.form.officeName = undefined
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = {}
      const fillId = row.fillId
      if (fillId) {
        let copy = Object.assign({}, row) //row是所编辑本行内数据对象
        this.form = copy
        this.getProjects()
        this.getOffices()
        this.open = true
        this.title = '修改申报回退信息编号' + fillId
      } else {
        this.$message.error('申报回退信息异常，请联系管理员')
      }
    },
    /** 填报明细提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const backInfo = this.form
          updateBack(backInfo).then((response) => {
            this.$modal.msgSuccess(response.msg)
            this.open = false
            this.getList()
          })
        }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.form = {}
      this.open = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const fillId = row.fillId
      this.$modal
        .confirm('是否确认删除申报回退信息编号为"' + fillId + '"的数据项？')
        .then(function () {
          return delBack(fillId)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style></style>
